I have this Chrome Extension where I need to load a big object from Chrome Storage when the user opens the Extension Popup. This object is not needed for the Popup's "landing page" to fully load, but I want to load the object right away to save time for when the user might really need it (in many other "sub pages").

All the "pages" of the Popup are created with a single javascript file, so the object will be available on those "sub pages", even when loaded in the "landing page".

The problem is that when I save the result of the function chrome.storage.local.get into a variable,

chrome.storage.local.get(["wkhighlight_allkanji", "wkhighlight_allvocab", "wkhighlight_allradicals"], result => {
    const allKanji = result["wkhighlight_allkanji"];
    const allVocab = result["wkhighlight_allvocab"];
    const allRadicals = result["wkhighlight_allradicals"];

    // ...
});

the interaction with the "landing page" doesn't work (you can move the mouse, but you can't click on anything) for a couple of seconds (while it is saving the big object into the variable, I presume).

My question is, if there is a way to fix the issue above, with an approach other than only loading this big object when the user really needs it (for example, only when the user enters those "sub pages"). That's the approach I had before, but it always takes like 4/5 seconds. On the other hand, if I could load it right away on the background of the "landing page" it would save a few seconds, which makes a big difference.